<template>
<div>
  <el-input v-model="input" placeholder="请输入学生/老师" style="width: 180px;"></el-input>
  <el-button type="primary" plain @click.native="handleRightClick(index)">查询</el-button>

  <el-table
    :data="tableData2"
    border
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="date"
      label="日期"
      width="100">
    </el-table-column>
    <el-table-column
      prop="class1"
      label="第一节">
    </el-table-column>
    <el-table-column
      prop="class2"
      label="第二节">
    </el-table-column>
    <el-table-column
      prop="class3"
      label="第三节">
    </el-table-column>
    <el-table-column
      prop="class4"
      label="第四节">
    </el-table-column>
  </el-table>

  <el-card class="box-card" style="position: absolute;right: 0;top: 25px;width: 30%;">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="老师" name="1">
        <el-select v-model="value7"
                   filterable
                   multiple
                   placeholder="请选择">
          <el-option-group
            v-for="group in options3"
            :key="group.label"
            :label="group.label">
            <el-option
              v-for="item in group.options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{item.value}}</span>
            </el-option>
          </el-option-group>
        </el-select>

        <template>
          <div id="Demo">
            <el-form ref="form" label-width="100px">
              <div
                class="check-group"
                v-for="(item, index) in equipments"
                :key="index">
                {{item.menu}}
                <el-checkbox-group
                  v-model="checkedEquipments[index]"
                  @change="handleCheckboxChange(item.id)">
                  {{checkedEquipments[index]}}
                  <el-checkbox
                    v-for="data in cities"
                    :label="item.id+'-'+data">
                    {{data}}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </el-form>
          </div>
        </template>
      </el-collapse-item>
    </el-collapse>
  </el-card>


</div>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
  import {ymeeting
    ,savey
    ,findy
    ,dely
  } from "@/api/yready";

  export default {
    created() {
      // 初始化默认选中状态
      for (let i = 0; i < this.checkEquip.length; i++) {
        let checkArr = []
        let item = this.checkEquip[i].childMenu
        if (item.length === 0) {
          this.checkedEquipments.push([])
        }else {
          for (let j = 0; j < item.length; j ++) {
            checkArr.push(item[j].id)
          }
          this.checkedEquipments.push(checkArr)
        }
      }
      console.log(this.checkedEquipments);
    },
    methods: {
      handleCheckboxChange () {
        this.checkEquipArr = []
        let arr = this.checkedEquipments
        for (let i = 0; i < arr.length; i ++) {
          let equipment = arr[i]
          if (equipment.length > 0) {
            let obj = {
              id: this.equipments[i].id,
              equips: []
            }
            for (let j = 0; j < equipment.length; j++) {
              obj.equips.push(equipment[j])
            }
            this.checkEquipArr.push(obj)
          }
        }
        console.log(this.checkEquipArr);
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },handleRightClick(id,index){
        console.log(id,"meeting.vue,handleRightClick");
        var param = {key:this.input};
        ymeeting(param)
          .then(res => {
            this.tableData2 = res.data;
          });
      }
    },
    data() {
      return {

        checkedEquipments: [], //随意修改后的checked项（即要传到后台的变更数据）
        equipments: [   // 所有数据
          {
            id: '1',
            menu: '设备1',
            childMenu: [{
              id: '1-1',
              menu: '暖通一'
            }, {
              id: '1-2',
              menu: '照明一'
            }, {
              id: '1-3',
              menu: '取暖一'
            }, {
              id: '1-4',
              menu: '应急一'
            }
            ]
          },
          {
            id: '2',
            menu: '设备2',
            childMenu: [
              {
                id: '2-1',
                menu: '暖通二'
              }, {
                id: '2-2',
                menu: '照明二'
              }, {
                id: '2-3',
                menu: '取暖二'
              }, {
                id: '2-4',
                menu: '应急二'
              }
            ]
          }
        ],
        checkEquip: [  //模拟后台获取的数据（各el-checkbox-group默认checked项）
          {
            id: '1',
            menu: '设备1',
            childMenu: [
              {
                id: '1-1',
                menu: '暖通一'
              }, {
                id: '1-2',
                menu: '照明一'
              }
            ]
          }, {
            id: '2',
            menu: '设备2',
            childMenu: []
          }
        ],

        cities:['1', '2', '3', '4', '5', '6', '7'],
        options3: [{
          label: '热门城市',
          options: [{
            value: '1',
            label: '上海1'
          }, {
            value: '2',
            label: '北京2'
          }]
        }, {
          label: '城市名',
          options: [{
            value: '3',
            label: '成都3'
          }, {
            value: '4',
            label: '深圳4'
          }, {
            value: '5',
            label: '广州5'
          }, {
            value: '6',
            label: '大连6'
          }]
        }],
        value7: '',

        activeNames: ['1','2','3'],
        tableData2: [{
          date: '2016-05-02',
          class1: '王小虎',
          class2: '上海市普陀区金沙江路 1518 弄',
          class3: '上海市普陀区金沙江路 1518 弄',
          class4: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          class1: '王小虎',
          class2: '上海市普陀区金沙江路 1518 弄',
          class3: '上海市普陀区金沙江路 1518 弄',
          class4: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-01',
          class1: '王小虎',
          class2: '上海市普陀区金沙江路 1518 弄',
          class3: '上海市普陀区金沙江路 1518 弄',
          class4: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          class1: '王小虎',
          class2: '上海市普陀区金沙江路 1518 弄',
          class3: '上海市普陀区金沙江路 1518 弄',
          class4: '上海市普陀区金沙江路 1518 弄',
        }]
      }
    }
  }
</script>
